<template>
    <pos-dialog title="Add Fee" :visible="visible" @close="close">
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Fee Name</div>
                <div>
                    <input type="text" class="form-control" v-model="fee.name">
                </div>
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Amount*</div>
                <div>
                    <input
                            type="text"
                            class="form-control text-right"
                            @focus="totalFocus"
                            @input="totalInput"
                            v-model="fee.total">
                </div>
            </div>
        </div>
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Taxable</div>
                <div>
                    <select class="form-control custom-select" v-model="fee.tax_status">
                        <option value="none">No</option>
                        <option value="taxable">Yes</option>
                    </select>
                </div>
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">TAX CLASS</div>
                <div>
                    <input
                            type="text"
                            class="form-control text-right"
                            @focus="totalTaxFocus"
                            @input="totalTaxInput"
                            v-model="fee.total_tax">
                </div>
            </div>
        </div>
        <number-pad submit-label="update fee" v-model="numberVal" @change="amountChange" @back="close"
                    @submit="submit"/>
    </pos-dialog>
</template>

<script>
import NumberPad from "./NumberPad.vue";

export default {
    name: "DialogFee",
    components: {NumberPad},
    props: {
        value: false,
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    data() {
        return {
            visible: false,
            fee: {
                name: '-',
                total: '0',
                tax_status: 'none',
                total_tax: '0'
            },
            amountChange: function () {

            },
            numberVal: 0
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        totalFocus() {
            this.numberVal = this.fee.total;
            this.amountChange = v => {
                this.fee.total = v;
            }
        },
        totalInput() {
            this.numberVal = this.fee.total;
        },
        totalTaxFocus() {
            this.numberVal = this.fee.total_tax;
            this.amountChange = v => {
                this.fee.total_tax = v;
            }
        },
        totalTaxInput() {
            this.numberVal = this.fee.total_tax;
        },
        submit() {
            this.$emit('submit', this.fee);
            this.$emit('input', false);
        }
    }
}
</script>

<style scoped>

</style>